<template>
  <!-- <h2>首页</h2> -->
  <!-- <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff8949"
  /> -->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="status" label="状态" width="80">
      <template #default="scope">
        <el-switch v-model="scope.row.status" @change="stchange(scope.row)"/>
      </template>
      
    </el-table-column>
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="content" label="内容" width="180" />

    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)"
          @chenge="dialogEditFormVisible = true"
        >
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    v-model="dialogEditFormVisible"
    title="修改文章"
    width="400"
  >
    <el-form :model="form">
      <el-form-item label="标题" label-width="140px">
        <el-input v-model="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容" label-width="140px">
        <el-input v-model="form.content" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取消</el-button>
        <el-button type="primary" @click="EditConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const value1 = ref(true);
const value2 = ref(true);

import { ElMessage, ElMessageBox } from "element-plus";

import http from "@/utils/http";
import { reactive } from "vue";
import { ref } from "vue";
// interface User {
//   title: string;
//   content: string;
//   status: boolean;
// }
let list = ref([]);

// 获取列表
function loadList() {
  http({
    url: "/posts",
    method: "get",
  }).then((res) => {
    console.log(res.data);
    list.value = res.data;
  });
}
loadList();

const form = reactive({
  title: "",
  content: "",
  status: "",
  id:""
});


// 改变状态
function stchange(row:any){
  http({
    url:'/posts/'+row.id,
    method:'put',
    data:{
      title:row.title,
      content:row.content,
      status:row.status
    }
  }).then(r=>{
    console.log(r.data);
    loadList()
  })
}


const dialogEditFormVisible = ref(false);
// 编辑
const handleEdit = (index: number, row: any) => {
  console.log(index, row);
  dialogEditFormVisible.value = true;
  form.title = row.title;
  form.content = row.content;
  form.status = row.status;
  form.id=row.id
};
// 确认修改
function EditConfirm(){
  console.log(form);
  
  http({
    url:'/posts/'+form.id,
    method:'put',
    data:{
      title:form.title,
      content:form.content,
      status:form.status
    }
  }).then(res=>{
    console.log(res.data);
    dialogEditFormVisible.value = false
    loadList()
  })
}
// 删除
const handleDelete = (index: number, row: any) => {
  console.log(index, row);
  ElMessageBox.confirm("确认删除吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http({
        url: "/posts/" + row.id,
        method: "delete",
      }).then((res) => {
        console.log(res.data);
        loadList();
      });
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {});
};
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
